<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>会员列表</title>

        <script src="/JD/Public/js/jquery.js"></script>
        <link rel="stylesheet" href="/JD/Public/css/bootstrap.min.css">
    </head>
    <body>
        <style>
            .tr_color{background-color: #9F88FF}
        </style>
        <!--<include file="Common/head"/>-->
        <h3>
            欢迎！
        </h3>

        <div class="div_head">
            <span>
                <h1 style="float: left;">商品列表</h1>
                <span style="float: right; margin-right: 8px; font-weight: bold;">
                    <a style="text-decoration: none;" href="/JD/index.php/Home/Goods/showAdd">【添加商品】</a>
                </span>
            </span>
        </div>
        <div></div>
        <div class="div_search">

        </div>
        <div style="font-size: 13px; margin: 10px 5px;">
            <table class="table table-bordered" border="1" width="100%">
                <thead>
                <tr style="font-weight: bold;">
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>库存</th>
                    <th>价格</th>
                    <th>图片</th>
                    <th>缩略图</th>
                    <th>创建时间</th>
                    <th align="center" colspan="2">操作</th>
                </tr>
                </thead>
                <tbody >

                </tbody>
                <tfoot>
                <tr>
                    <td colspan="9" align="center">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">

                                <li id="prevPage">
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>

                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </td>
                </tr>

                </tfoot>
            </table>
        </div>


    </body>
    <script>
        $(function(){
            //每页显示条数
            var pageNum=5;
            //显示分页
            $.get("/JD/index.php/Home/ShowList/getCount",function(res){
                var count=res.count;
                var pageCount=Math.ceil(count/pageNum);
                var pageTpl='';
                for(var i=1;i<=pageCount;i++){
                    pageTpl+='<li class="page-btn"><a href="javascript:void(0);">'+i+'</a></li>';
                }
                $("#prevPage").after(pageTpl)
            })
            //初始化获取数据
            getData(0,pageNum);
            //点击加载对应页面的数据
            $(".pagination").on("click",$(".page-btn"),function(event){
                event.stopPropagation();
                if($(event.target).is("a")){
                    var currentPage=parseInt($(event.target).text())-1;
                    getData(currentPage,pageNum);
                    console.log(currentPage);
                }
            })
        })

        //获取数据
        function getData(currentPage,pageNum){
            $.post("/JD/index.php/Home/ShowList/getGoodsList",{currentPage:currentPage,pageNum:pageNum},function(data){
                var tpl='';
                for(var i=0;i<data.length;i++){
                    tpl+='<tr id="product2" ">\
                        <td>'+data[i].id+'</td>\
                        <td><a href="#">'+data[i].goods_name+'</a></td>\
                        <td>'+data[i].goods_number+'</td>\
                        <td>'+data[i].goods_price+'</td>\
                        <td><img src="/JD/'+data[i].goods_img+'" height="60" width="60"></td>\
                        <td><img src="/JD/'+data[i].goods_img+'" height="40" width="40"></td>\
                        <td>'+data[i].goods_create_time+'</td>\
                        <td><a href="/JD/index.php/Home/Ament/showAm?id='+data[i].id+'">修改</a></td>\
                        <td><a href="/JD/index.php/Home/ShowList/wereAm?id='+data[i].id+' ">删除</a></td>\
                      </tr>';


                }

                $("tbody").empty().append(tpl);
            })
        }


    </script>




</html>